<template>
    <el-drawer
            title=""
            :visible.sync="drawer"
            size="50%"
            :modal="true"
            :wrapperClosable="false">
        <el-card>
            <div>新建客户</div>
        </el-card>

        <div style="background-color: #f3f3f3;height: 10px"></div>

        <el-form ref="clientForm" :model="clientForm" label-width="80px" label-position="left" style="padding: 20px">
            <el-form-item label="姓名" prop="customerLeadsName"
                          :rules="[{ required: true, message: '请输入客户名称', trigger: 'blur' } ]">
                <el-input v-model="clientForm.customerLeadsName" maxlength="50" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="customerLeadsPhone"
                          :rules="[{ required: true, message: '手机号必填', trigger: 'blur' },
                          { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }]">
                <el-input v-model="clientForm.customerLeadsPhone" placeholder="请输入电话"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="clientForm.customerLeadsRemarks" maxlength="50" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="客户意向">
                <el-select v-model="clientForm.customerLeadsIntent" placeholder="请选择" style="width: 100%;">
                    <el-option label="A" value="A"></el-option>
                    <el-option label="B" value="B"></el-option>
                    <el-option label="C" value="C"></el-option>
                    <el-option label="D" value="D"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="客户来源">
                <el-select v-model="clientForm.clientSource" placeholder="请选择" style="width: 100%;">
                    <el-option label="转介绍" value="1"></el-option>
                    <el-option label="员工开发" value="2"></el-option>
                    <el-option label="其他" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="clientForm.customerLeadsSex" placeholder="请选择" style="width: 100%;">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="生日">
                <el-date-picker type="date" placeholder="选择日期" v-model="clientForm.customerLeadsBirthday"
                                style="width: 100%;"></el-date-picker>
            </el-form-item>
            <div style="position: absolute;bottom: 20px;right: 20px;">
                <el-button type="primary" @click="submitHandle()">保存</el-button>
            </div>
        </el-form>
    </el-drawer>
</template>

<script>
export default {
    customerLeadsName: "create_client",
    props: {
        status: {
            type: String,
            default: "0"
        }
    },
    data() {
        return {
            drawer: false,
            clientForm: {
                customerLeadsName: '',
                customerLeadsPhone: '',
                customerLeadsRemarks: '',
                customerLeadsIntent: '',
                clientSource: '',
                customerLeadsSex: '',
                customerLeadsBirthday: '',
            }
        }
    },
    methods: {
        open(bln) {
            this.drawer = bln
        },
        submitHandle() {
            let that = this
            that.$refs.clientForm.validate((valid) => {
                if (!valid) {
                    return false;
                }

                that.clientForm["customerLeadsStatus"] = that.status

                 that.$request("/api/clientClue/insertClientClue/1_0", that.clientForm, "POST").then((data) => {
                     that.$message.success("新建客户成功")
                     that.resetData()
                     that.$emit("queryDataHandle")
                     this.drawer = false
                 })
            });
        },
        resetData() {
            this.$refs.clientForm.resetFields();
        }
    }
}
</script>

<style scoped>
/deep/ .el-drawer .el-drawer__header {
    margin: 0;
    padding: 0;
}

/deep/ .el-drawer .el-drawer__close-btn {
    position: absolute;
    top: 20px;
    left: -40px;
    width: 26px;
    height: 26px;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d5d5d5;
}

/deep/ .el-drawer {
    overflow: initial;
}
</style>
